<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="icon"  href="../static/favicon2.png" sizes="16x16 32x32 96x96">
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>

    <script>

        $(document).ready(function() {

            $('#loginForm').submit(function(e) {

                e.preventDefault(); // 阻止表单默认提交行为

                var username = $('#username').val();
                var password = $('#password').val();

                var span1 = document.querySelector('.message1')
                var span2 = document.querySelector('.message2')
                // 进行用户名和密码的验证
                if (username !== 'alicat' || password !== '123456') {
                    // input_username.innerText = "请输入正确的用户名和密码";

                    span1.innerText = "请输入正确的用户名和密码";
                    span2.innerText = "请输入正确的用户名和密码";
                    return; // 输入不合法，不继续执行
                } else {
                    // 获取当前的完整 URL
                    {#var currentUrl = window.location.href;#}
                    {#// 使用正则表达式替换掉127.0.0.1#}
                    {#var newUrl = currentUrl.replace('\/login', '');#}
                    {#alert(newUrl)#}
                    {#// 跳转到新的 URL#}
                    {#window.location.href = "https://www.baidu.com";#}
                    {#window.location.href = newUrl;#}
                    $.ajax({
                        type: 'POST',
                        url: '/login',
                        data: $(this).serialize(),
                        success: function(response) {
                            window.location.href = '/';
                        },
                        error: function() {
                            alert('登录失败');
                        }
                    });
                }

            });
        });
    </script>

    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        form {
            width: 300px;
            margin:  auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        input[type="text"], input[type="password"] {
            width: 93.5%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }

        .center-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 250px;
        }

        .message1 {
            color: red;
            font-size: small;
        }

        .message2 {
            color: red;
            font-size: small;
        }
    </style>
</head>

<body>
    <div class="center-flex">
        <img src="../static/alicat.jpg" width="20%" height="20%" alt="Centered Image">
    </div>
    <form id='loginForm' action={{ url_for('login') }} method="post">
{#        {{ csrf_token }}#}
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            <span class="message1"></span>
        </div>
        <br>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
            <span class="message2"></span>
        </div>
        <br>
        <div>
            <input type="submit" value="登录">
        </div>
    </form>


</body>
</html>